<template>
    <div class="wrapper">
        <router-view class="frameParent" style="flex:1"></router-view>
        <div class="tabbar" append="tree">
            <!--<div class="tabbar-item" v-for="item in tabItems" @click="onclickTabbarItem(item.index)">
                <text class="tab-text">{{item.title}}</text>
            </div>-->
            <tabitem v-for="item in tabItems" 
                :key="item.index" 
                :index="item.index" 
                :icon="item.icon" 
                :title="item.title" 
                :titleColor="item.titleColor" 
                @tabItemOnClick="tabItemOnClick">
            </tabItem>
        </div>
    </div>
   
</template>

<script>

module.exports = {
    components: {
        tabitem: require('../include/tabitem.vue')
    },
    data: function () {
        return {
            dir: 'views/',
            tabItems: [{
                index: 0,
                title: '基础示例',
                titleColor: '#000000',
                icon: '',
                image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
                selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
                url: '/demos/basic'
            }, {
                index: 1,
                title: '高级示例',
                titleColor: '#202020',
                icon: '',
                image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
                selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
                url: '/demos/advance'
            }, {
                index: 2,
                title: '完整演示',
                titleColor: '#0000ff',
                icon: '',
                image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
                selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
                url: '/demos/full'
            }]
        }
    },
    created: function () {
        console.log('Demo Home View is Created ');
        this.$router.push('/demos/basic')

    },
    methods: {
        tabBarOnClick: function (e) {
            console.log('tabBarOnClick ', e.index);
        },
        tabItemOnClick : function(e) {
            this.selectedIndex = e.index;
            // this.select(e.index);
            // console.log('click item ', e.index);
            // this.$router.push('/demos/basic')
            this._jumpToIndex();
        },
        onclickTabbarItem: function(i) {
           this.selectedIndex = i;
           this._jumpToIndex();
        },

        _jumpToIndex: function(){
            console.log('jump to index ', this.selectedIndex);
            // debugger;
            for(var j=0;j<this.tabItems.length;j++) {
                 var tabItem = this.tabItems[j];
                 if(tabItem.index == this.selectedIndex) {
                     console.log('jump to path:', tabItem.url);
                     this.$router.push(tabItem.url);
                 }
            }
        }
    }
}
</script>

<style scoped>
.wrapper {
  width: 750;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  margin-bottom: 88;
}

.tabbar {
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88;
  /*border-width: 1px;
  border-style: solid;
  border-color: gray;*/
  background-color: white;
}

.tabbar-item {
    flex: 1; 
    flex-direction: column; 
    align-items:center; 
    justify-content:center; 
    height: 88;
}

.frameParent{
    background-color: #c0c0f2;
    /*height: 100%;*/
    min-height: 1245px;
}
</style>
